<template>
  <div>
    <div class="searchHead">
      <el-input
          v-model="inputSearch"
          placeholder="请输入需要的文件哈希"
          class="input-with-select"
          clearable
      >
        <template #append>
          <el-button @click="search">搜索</el-button>
        </template>
      </el-input>
    </div>
<!--    <el-button type="primary" class="highlySearch" @click="dialogTableVisible=true">交易设置</el-button>-->
<!--    <el-button type="primary" class="reFlash" @click="reFlash">刷新</el-button>-->
    <el-table :data="tableData" style="width: 100%" height="800"
              :header-cell-style="{background:'#fdfdfd',color:'#409eff',textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }"

    >
      <el-table-column prop="title" label="售单标题" width="200"/>
      <el-table-column prop="description" label="售单描述" width="200"/>
      <el-table-column prop="status" label="状态" width="200"
                       :filters="[
            {text:'在售' , value:'在售' },
            {text:'已出售' , value:'已出售' },
            {text:'停售' , value:'停售' },
      ]"
                       :filter-method="filterByState"
      />
      <el-table-column prop="price" label="已授权数量" width="200" sortable/>
      <el-table-column prop="fileHash" label="文件哈希" width="250" sortable/>
      <el-table-column prop="price" label="价格" width="100" sortable/>

      <el-table-column prop="operation" label="操作" width="210">
        <template  v-slot="scope">
          <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="是否确定撤销?"
              @confirm="revocation(scope.row.id)"
          >
            <template #reference>
              <el-link  type="info" >撤销</el-link>
            </template>
          </el-popconfirm>

          <span class="seat"></span>

          <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="是否确定停售?"
              @confirm="stopSale(scope.row.id)"
          >
            <template #reference>
              <el-link  type="danger"  v-if="scope.row.status!='停售'" >停售</el-link>
            </template>
          </el-popconfirm>

          <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="是否确定出售?"
              @confirm="sell(scope.row.id)"
          >
            <template #reference>
              <el-link  color="#626aef"
                        :dark="isDark"
                        plain  v-if="scope.row.status=='停售'" >出售</el-link>
            </template>
          </el-popconfirm>

          <!--    <el-link  type="danger" @click="stopSale(scope.row.id)" v-if="scope.row.status!='停售'" >停售</el-link>-->
          <!--    <el-link  type="primary" @click="sell(scope.row.id)" v-if="scope.row.status=='停售'" >出售</el-link>-->

          <span class="seat"></span>
<!--          <el-link  type="primary" @click="openedit(scope.row.id)">编辑</el-link>-->
        </template>
      </el-table-column>

    </el-table>

    <el-dialog v-model="dialogTableVisible" title="交易设置" draggable="true" style="width: 600px">
      <span>燃气费设置</span>
      <el-input v-model="gasCost" placeholder="燃气费设置" style="width: 200px;margin-left: 25px"/>
      <br>
      存储抵押设置
      <el-input v-model="storageMortgage" placeholder="存储抵押设置" style="width: 200px"/>
      <el-popconfirm title="确定要退出吗？"
                     @confirm="dialogTableVisible=false"
      >
        <template #reference>
          <el-button style="margin-left: 60% ;margin-top: 20px" confirm="dialogTableVisible=false">取消</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="确定要如此设置吗？"
                     @confirm="confirm"
      >
        <template #reference>
          <el-button type="primary" style="margin-left: 20px ;margin-top: 20px">确认</el-button>
        </template>
      </el-popconfirm>
    </el-dialog>
  </div>
</template>

<script>

import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "trade-manage",
  data() {
    return {
      dialogTableVisible2: false,
      saleName: '',
      saleDesc: '',
      tableData: [],
      dialogTableVisible: false,
      state: '',
      numOfGranted: '',
      price: '',
      options: '',
      gasCost: '',
      storageMortgage: '',
      inputSearch: ''
    }
  },
  methods: {
    filterByState(value, row) {
      return row.state === value
    },
    reFlash(){
      axios.get("http://120.48.51.66:8081/sale/getAllSale").then((response) => {
        console.log(response)
        sessionStorage.setItem("allSale", (JSON).stringify(response.data.data.saleList))
        this.tableData = JSON.parse(sessionStorage.getItem('allSale'))
      })
    },
    revocation(temp){
      let form=new FormData();
      form.append("id",temp)
      axios.post('http://120.48.51.66:8081/sale/deleteSale',form).then( (response)=>{
        if(response.data.code==200){
          ElMessage({
            message:"撤销成功",
            type:'success'
          });
          console.log('撤销成功')

        }else{
          this.$message({
            message: "撤销失败",
            type: "error"
          });
        }
      });
      setTimeout(()=>{
        axios.get("http://120.48.51.66:8081/sale/adminGetAllSale").then((response) => {
          console.log(response)
          sessionStorage.setItem("allSale", (JSON).stringify(response.data.data.saleList))
          this.tableData = JSON.parse(sessionStorage.getItem('allSale'))
        })
      },1200)
    },
    stopSale(temp){
      // ElMessageBox.confirm('是否确认停售')
      console.log(temp)
      let form=new FormData();
      form.append("id",temp)
      form.append('status',0)

      axios.post('http://120.48.51.66:8081/sale/changeStatus',form).then( (response)=>{
        if(response.data.code==200){
          ElMessage({
            message:"停售成功",
            type:'success'
          });
          console.log('停售成功')
          console.log(form)

        }else{
          this.$message({
            message: "添加售单失败",
            type: "error"
          });
        }
      });
      setTimeout(()=>{
        axios.get("http://120.48.51.66:8081/sale/adminGetAllSale").then((response) => {
          console.log(response)
          sessionStorage.setItem("allSale", (JSON).stringify(response.data.data.saleList))
          this.tableData = JSON.parse(sessionStorage.getItem('allSale'))
        })
      },1200)
    },
    sell(temp){
      // ElMessageBox.confirm('是否确认出售')
      console.log('出售')
      console.log(temp)

      let form=new FormData();
      form.append("id",temp)
      form.append('status',1)

      axios.post('http://120.48.51.66:8081/sale/changeStatus',form).then( (response)=>{
        if(response.data.code==200){
          ElMessage({
            message:"恢复出售成功",
            type:'success'
          });
          console.log('恢复出售成功')
          console.log(form)

        }else{
          this.$message({
            message: "恢复出售失败",
            type: "error"
          });
        }
      });
      setTimeout(()=>{
        axios.get("http://120.48.51.66:8081/sale/adminGetAllSale").then((response) => {
          console.log(response)
          sessionStorage.setItem("allSale", (JSON).stringify(response.data.data.saleList))
          this.tableData = JSON.parse(sessionStorage.getItem('allSale'))
        })
      },1200)
    },
    confirm() {
      this.dialogTableVisible = false
    },
    search() {

      if (this.inputSearch === '') {
        this.$message.error("输入不能为空！！")
      } else {

        this.tableData = this.tableData.filter((val) => {
          return val.fileHash === this.inputSearch
        })
      }
    },
    haltSale(row) {
      console.log(row, "123")
    }
  },

  watch: {
    inputSearch(newV) {
      if (newV === '') {
        this.tableData = JSON.parse(sessionStorage.getItem('allSale'))
      }
    }
  },
  beforeCreate() {
    axios.get("http://120.48.51.66:8081/sale/adminGetAllSale").then((response) => {
      console.log(response)
      sessionStorage.setItem("allSale", (JSON).stringify(response.data.data.saleList))
      this.tableData = JSON.parse(sessionStorage.getItem('allSale'))
    })
  }
}
</script>

<style scoped>

div {
  margin: 10px;
}

.searchHead {
  width: 1200px;
  display: inline-block;
}

.highlySearch {
  margin-left: 80%;
  position: relative;
  top: -52px;
}

.highlySearch:hover {
  transform: scale(1.1);
}

.trader {
  display: inline-block;
  margin-right: 30px;
}

.searchTip {
  margin-left: 80%;
}

.nftChoice {
  width: 240px;
  margin-left: 200px;
}

</style>